<template>
  <div class="news-detail-main">
    <el-card class="box-card">
      <el-form ref="form" :model="news" label-width="80px" :label-position="labelPosition">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="文章标题">
              <el-input v-model="news.title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="作者">
              <el-input v-model="news.author"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="内容详情">
          <el-input v-model="news.desc" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="最热">
          <el-switch v-model="news.hot" active-color="#409EFF" inactive-color="#E5E5E5"></el-switch>
        </el-form-item>
        <el-form-item label="封面图片">
          <div class="imgCover">
            <el-upload
              ref="upload"
              class="upload-demo"
              :action="host+'/admin/xy/upload/uploadImg'"
              :file-list="fileList"
              :on-success="handleSucc"
              :headers="headers"
              :v-model="news.cover"
            >
              <el-button size="small" type="primary">选择图片</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
                <img v-if="imageUrl" class="imgShow" :src="imageUrl" alt="加载失败">
          </div>
        </el-form-item>
        <el-form-item label="文章显示封面">
          <el-switch v-model="news.value" active-color="#409EFF" inactive-color="#E5E5E5"></el-switch>
        </el-form-item>
        <el-form-item label="切换富文本类型">
          <template>
            <el-radio v-model="news.type" label="0">富文本</el-radio>
            <el-radio v-model="news.type" label="1">markdown</el-radio>
          </template>
          <Tinymce v-show="news.type==0" v-model="news.content1"></Tinymce>
          <MarkdownEditor v-show="news.type==1" v-model="news.content1"></MarkdownEditor>
        </el-form-item>
        <el-form-item style="margin-top:30px;text-align:right">
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button @click="doCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
      

<script>
const settingFile = require("@/settings");
import Tinymce from "@/components/Tinymce";
import MarkdownEditor from "@/components/MarkdownEditor";
import { getToken } from "@/utils/myAuth";
import { newsSave, newsUpdate, newsDetail } from "@/api/material/news";
// import { title } from '@/settings';
export default {
  name: "newsDeatil",
  components: {
    Tinymce,
    MarkdownEditor,
  },
  data() {
    return {
      labelPosition: "left",
      host: settingFile.host,
      news: {
        type: "0",
      },
      imageUrl: "",
      fileList: [],
      id: "",
    };
  },
  created() {
    
    this.getNewsDetail();
  },
  computed: {
    headers() {
      return {
        "bufan-token": getToken(), //图片请求头
      };
    },
  },
  methods: {
    getNewsDetail() {
      this.id=this.$route.params.id  //通过传递过来的id,来判断执行的是编辑还是新增
      if (this.id) {
        newsDetail({
          id: this.$route.params.id, //获取传过来的id,并通过id获取详细信息
        }).then((res) => {
          this.news = res.data;
        });
      }else{
         this.news = {
            type: "0"
         }
      }
    },
    onSubmit() {
      var api = null;
      if (this.news.id) {
        api = newsUpdate;
      } else {
        api = newsSave;
      }
      api({
        xyNews: {
          ...this.news,
        },
      }).then((res) => {
        if (res.code == "success") {
          this.$message.success("保存成功");
        } else {
          this.$message.error("数据提交失败");
        }
      });
      this.$router.push({ name: "manews" });
    },
    doCancel() {
      this.$router.push({ name: "manews" });
    },
    handleSucc(response, file, fileList) {
      this.$refs.upload.clearFiles(); //清空已上传的文件列表
      this.imageUrl = URL.createObjectURL(file.raw);
    },
  },
};
</script>
<style lang='scss' scoped>
.box-card {
  margin: 30px;
  .el-form-item {
    padding-left: 30px;

    ::v-deep .el-form-item__label {
      width: 115px !important;
    }
  }
}
.imgCover {
  display: flex;
  justify-content: space-between;
  align-content: center;
  width: 450px;
  .upload-demo {
  }
  .imgShow {
    width: 100px;
    height: 80px;
    display: inline-block;
  }
}
</style>